<template>
  <ul class="side-bar">
    <router-link to="/homepage">
      <li class="side-bar-item">
        <i class="fa fa-calendar"></i>
      </li>
    </router-link>
    <router-link to="/notice">
      <li class="side-bar-item">
        <i class="fa fa-bullhorn"></i>
      </li>
    </router-link>
    <router-link to="/attendance">
      <li class="side-bar-item">
        <i class="fa fa-address-book"></i>
      </li>
    </router-link>
    <router-link to="/payrequest">
      <li class="side-bar-item">
        <i class="fa fa-money"></i>
      </li>
    </router-link>
    <router-link to="/reimbursement">
      <li class="side-bar-item">
        <i class="fa fa-credit-card"></i>
      </li>
    </router-link>
    <router-link to="/leave">
      <li class="side-bar-item">
        <i class="fa fa-circle-o-notch"></i>
      </li>
    </router-link>
    <router-link to="/outgoing">
      <li class="side-bar-item">
        <i class="fa fa-laptop"></i>
      </li>
    </router-link>
    <router-link to="/purchase">
      <li class="side-bar-item">
        <i class="fa fa-newspaper-o"></i>
      </li>
    </router-link>
  </ul>
</template>

<script type="text/ecmascript-6">
  import 'font-awesome/css/font-awesome.css'

  export default {}
</script>

<style>
  .side-bar {
    float: left;
    width: 100px;
    height: 100%;
    background: #41c8ad;
  }

  .side-bar .side-bar-item {
    width: 100px;
    height: 80px;
    line-height: 80px;
    background: #41c8ad;
    font-size: 30px;
    text-align: center;
    color: #117d67;
  }

  .router-link-active .side-bar-item {
    color: #41c8ad;
    background: #f0f4fb;
  }
</style>
